<template>
  <vxe-grid
    ref="gridRef2"
    v-bind="gridOptions2"
    @toolbar-button-click="toolbarButtonClickEvent"
  >
    <template #active="{ row }">
      <vxe-button
        v-show="row.createTime != undefined"
        mode="text"
        status="primary"
        content="编辑"
        icon="vxe-icon-edit"
        @click.stop="updateRow(row)"
      ></vxe-button>
      <vxe-button
        v-show="row.createTime != undefined"
        mode="text"
        status="primary"
        content="删除"
        icon="vxe-icon-edit"
        @click="deleteData(row)"
      ></vxe-button>
      <vxe-button
        v-show="row.createTime != undefined && woType != '预混'"
        mode="text"
        status="primary"
        content="修改状态"
        icon="vxe-icon-edit"
        @click="updateWoRawStatus(row)"
      ></vxe-button>
      <vxe-button
        v-show="row.createTime == undefined"
        mode="text"
        status="error"
        @click="removeRow(row)"
        >删除</vxe-button
      >
    </template>
  </vxe-grid>
</template>

<script>
import { VxeUI } from "vxe-pc-ui";
import {
  addWoRaw,
  addWoRaws,
  delWoRaw,
  getWoRawByPage,
  updateWoRawStatus,
  updateWoRawActualLossValue,
} from "@/api/product/woRaw";

import XEUtils, { first } from "xe-utils";
import { fi } from "element-plus/es/locale/index.mjs";

export default {
  name: "woRaw",
  props: {
    woRawSub: {
      type: Object,
      default: () => {
        return {
          wo: "",
          workNo: "",
          id: 0,
          // fixedPagination: true
        };
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {
          workNo: "",

          // fixedPagination: true
        };
      },
    },
    woType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  watch: {
    woRawSub: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        this.localWoRawSub = val;
        if (val.wo != "" && val.wo != undefined) {
          console.log(this.localWoRawSub, "===>代码修改提交===>");
          setTimeout(() => {
            this.$refs.gridRef2.commitProxy("reload");
          }, 100);
        }

        // this.initTableColumn(val);
      },
    },
  },
  data() {
    const gridOptions2 = {
      editConfig: {
        trigger: "click",
        mode: "cell",
        showStatus: true,
      },
      height: "350",
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },

      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      toolbarConfig: {
        // refresh: true,
        // import: true,
        // export: true,
        // print: true,
        // zoom: true,
        custom: true,
        buttons: [
          { name: "新增", code: "myAdd", status: "primary" },
          { name: "保存", code: "mySave", status: "error" },

          // { name: "保存", code: "mySave", status: "success" },
        ],
      },

      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },
        {
          field: "wo",
          title: "工单号",
          sortable: true,
          width: 180,
        },
        {
          field: "rawCode",
          title: "物料编号",
          sortable: true,
          width: 120,
          editRender: { name: "input" },
        },
        {
          field: "qty",
          title: "数量",
          sortable: true,
          width: 180,
          editRender: { name: "VxeNumberInput", props: { type: "float" } },
        },

        {
          field: "feedingPosition",
          title: "上料位置",
          sortable: true,
          width: 180,
          editRender: {
            name: "VxeSelect",
            options: [
              { label: "开卷1", value: "开卷1" },
              { label: "开卷2", value: "开卷2" },
            ],
          },
          visible: this.woType == "涂布",
        },
        {
          field: "installPosition",
          title: "安装位置",
          sortable: true,
          width: 180,
          editRender: {
            name: "VxeSelect",
            options: [
              { label: "黄轴", value: "黄轴" },
              { label: "蓝轴", value: "蓝轴" },
            ],
          },
          visible: this.woType == "涂布",
        },
        {
          field: "batchCode",
          title: "批次号",
          sortable: true,
          width: 180,
          editRender: { name: "input" },
        },

        // {
        //   field: "rawType",
        //   title: "类型",
        //   sortable: true,
        //   width: 180,
        // },
        {
          field: "status",
          title: "状态",
          sortable: true,
          width: 180,
        },

        {
          field: "dataLossValue",
          title: "数采损耗值",
          sortable: true,
          width: 180,
        },

        {
          field: "actualLossValue",
          title: "实际损耗值",
          sortable: true,
          width: 180,
          editRender: { name: "VxeNumberInput", props: { type: "float" } },
        },

        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 200,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            // console.log(page, sorts, form, "----");

            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawByPage({
              ...page,
              wo: this.localWoRawSub.wo
                ? this.localWoRawSub.wo
                : this.localFormData.workNo,
              subId: this.localWoRawSub.id ? this.localWoRawSub.id : null,
            });
            this.localWoRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    return {
      gridOptions2,
      localWoRawSub: this.woRawSub,
      localFormData: this.formData,
      // woType: this.woType,
    };
  },
  methods: {
    async toolbarButtonClickEvent(params) {
      if (params.code == "myAdd") {
        const $grid = this.$refs.gridRef2;
        if (this.formData.workNo == "" || this.formData.workNo == undefined) {
          VxeUI.modal.message({
            content: "请先输入工单信息",
            status: "error",
          });
        } else {
          if ($grid) {
            const record = {
              rawCode: ``,
              wo: this.formData.workNo,
              qty: 1,
              status: "未消耗",
              rawType: "原材料",
              active: "",
            };
            const { row: newRow } = await $grid.insert(record);
            // 激活不自动聚焦
            $grid.setEditRow(newRow);

            // 激活并自动聚焦
            // $grid.setEditRow(newRow, 'name')
            // 激活并自动聚焦
            // $grid.setEditCell(newRow, 'name')
          }
        }
        // this.showPopup = true;
      } else if (params.code == "mySave") {
        // const $grid = this.$refs.gridRef;
        // if ($grid) {
        //   const selectRecords = $grid.getCheckboxRecords();
        //   if (selectRecords.length <= 0) {
        //     VxeUI.modal.message({ content: `请先选择数据`, status: "warning" });
        //   }
        // }
        const $grid = this.$refs.gridRef2;
        console.log($grid, "-----$grid---");
        if ($grid) {
          const insertRecords = $grid.getInsertRecords();
          const result = await addWoRaws(insertRecords);
          $grid.commitProxy("reload");
          // VxeUI.modal.alert(`新增：${insertRecords.length} 行`);
        }
        console.log("===>保存===>");
      }
      console.log(params.code);
    },
    async updateRow() {
      console.log("===>", row);
    },
    async updateWoRawStatus(row) {
      //这个需要赋值
      this.formOptions2.data = row;
      this.showPopup2 = true;
    },
    removeRow(row) {
      const $grid = this.$refs.gridRef2;
      if ($grid) {
        $grid.remove(row);
        VxeUI.modal.message({
          content: "数据已删除",
          status: "success",
        });
      }
    },
    async deleteData(row) {
      try {
        await delWoRaw(row);
      } catch (e) {
      } finally {
        this.$refs.gridRef2.commitProxy("reload");
      }
    },

    // async insert(record) {
    //   this.$refs.gridRef2.insert(record);
    // },
    // getInsertRecords() {

    // }
  },
};
</script>
